<template>
	<xn-form-container
		:title="title"
		:width="700"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:bodyStylePadding="0"
	>
		<div>
			<fm-generate-form :data="jsonData" ref="generateForm" v-if="fmUi == 'element'" />
			<fm-generate-antd-form :data="jsonData" ref="generateForm" v-else />
		</div>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button style="margin-right: 8px" type="primary" :submitLoading="submitLoading" @click="onDraft"
				>保存草稿</a-button
			>
			<a-button type="danger" @click="onSubmit" :submitLoading="submitLoading">提交</a-button>
		</template>
	</xn-form-container>
</template>
<script>
	import { message } from 'ant-design-vue'
	import sysFlowDraftApi from '@/api/flow/sysFlowDraftApi'
	export default {
		name: 'PreDesignForm',
		components: {},
		data() {
			return {
				visible: false,
				title: '',
				submitLoading: false,
				formData: null,
				jsonData: null,
				fmUi: 'element'
			}
		},
		methods: {
			onOpen(record) {
				this.visible = true
				if (record) {
					this.formData = record
					this.title = record.formTitle
					if (record.formJson) {
						this.jsonData = JSON.parse(record.formJson)
						this.fmUi = this.jsonData.config.ui
					}

					this.$nextTick(() => {
						// 设置表单数据
						if (record.dataJson) {
							this.$refs.generateForm.setData(JSON.parse(record.dataJson))
						}
						this.$refs.generateForm.refresh()
					})
				}
			},
			/**
			 * 保存草稿
			 */
			async onDraft() {
				this.submitLoading = true
				let param = {
					flowId: this.formData.flowId,
					flowTitle: this.formData.flowTitle,
					formJson: this.formData.formJson
				}
				const data = await this.$refs.generateForm.getData()
				param.dataJson = JSON.stringify(data)
				sysFlowDraftApi
					.sysFlowDraftSubmitForm(param, false)
					.then(() => {
						this.onClose()
					})
					.finally(() => {
						this.submitLoading = false
					})
			},
			onSubmit() {},
			onClose() {
				this.visible = false
			}
		}
	}
</script>
